<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="stylesheet" href="css/style.css?v=2">
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="js/libs/modernizr-1.7.min.js"></script>
    <style>
        * { webkit-transition: 1s;}
        #container
        {
            width: 412px;
            margin: 100px auto;
        }
        
        #gameBoardWrapper
        {
            display: inline-block;
            padding: 6px;
            background-color: #f0f0f0;
        }
        #gameBoard tbody
        {
            margin: 10px;
            background-color: #f0f0f0;
        }
        #gameBoard td
        {
            width: 40px;
            height: 41px;
            background-image: url('img/notactive.png');
            cursor: pointer;
        }
        
        .invalidMove
        {
            cursor: no-drop !important;
        }
        
        .usedGreen
        {
           background-image: url('img/usedGreen.png') !important; 
        }
        
        .justUsedGreen
        {
            background-image: url('img/justUsedGreen.png') !important;
        }
        
        .usedBlue
        {
            background-image: url('img/usedBlue.png') !important;
        }
        
        .justUsedBlue
        {
            background-image: url('img/justUsedBlue.png') !important;
        }
        
        .notReadyCell
        {
            opacity: 0.5;
        }
    </style>

    <script>
        $(function () {
            var player = new Player();

            function Player() {
                var index = 1;

                this.currentUsed = "usedGreen";
                this.currentJustUsed = "justUsedGreen";
                this.oppositeUsed = "usedBlue";
                this.oppositeJustUsed = "justUsedBlue";
                this.nextTurn = function () {
                    if (index % 2 == 0) {
                        this.currentUsed = "usedGreen";
                        this.currentJustUsed = "justUsedGreen";
                        this.oppositeUsed = "usedBlue";
                        this.oppositeJustUsed = "justUsedBlue";
                    }
                    else {
                        this.currentUsed = "usedBlue";
                        this.currentJustUsed = "justUsedBlue";
                        this.oppositeUsed = "usedGreen";
                        this.oppositeJustUsed = "justUsedGreen";
                    }
                    index++;
                }
            }

            function isMoveValid(firstPoint, secondPoint) {
                if (firstPoint.x == secondPoint.x) {
                    if (secondPoint.y - firstPoint.y != 2) {
                        return false;
                    }
                }
                else if (firstPoint.y == secondPoint.y) {
                    if (secondPoint.x - firstPoint.x != 2) {
                        return false;
                    }
                }
                else {
                    if (secondPoint.x - firstPoint.x != 2 || secondPoint.y - firstPoint.y != 2) {
                        return false;
                    }
                }

                /*var firstPointCopy = new Point(firstPoint.x, firstPoint.y);
                var secondPointCopy = new Point(secondPoint.x, secondPoint.y);*/
                var middlePoint = getMiddlePoint(firstPoint, secondPoint);
                var points = [firstPoint, middlePoint, secondPoint];

                for (var i = 1; i < points.length; i++) {
                    if (isPointUsed(points[i])) {
                        return false;
                    }
                }
                return true;
            }

            function isPointUsed(point) {
                var cell = getCellFromPoint(point);

                return isCellUsed(cell);
            }

            function getCellFromPoint(point) {
                var pointCopy = new Point(point.x, point.y);
                pointCopy.x++;
                pointCopy.y++;
                var cell = $("#gameBoard tr:nth-child(" + pointCopy.y + ") td:nth-child(" + pointCopy.x + ")");
                return cell;
            }

            function isCellUsed(cell) {
                if (cell.hasClass("usedGreen")) {
                    return true;
                }
                else if (cell.hasClass("justUsedGreen")) {
                    return true;
                }
                else if (cell.hasClass("usedBlue")) {
                    return true;
                }
                else if (cell.hasClass("justUsedBlue")) {
                    return true;
                }
                return false;
            }

            function isOpponentCell(cell) {
                if (cell.hasClass(player.oppositeUsed)) {
                    return true;
                }
                else if (cell.hasClass(player.oppositeJustUsed)) {
                    return true;
                }
                return false;
            }

            function Point() {
                if (arguments.length == 2) {
                    this.x = arguments[0];
                    this.y = arguments[1];
                }
                else if (arguments.length == 1) {
                    this.x = parseInt(pointAsString[1]);
                    this.y = parseInt(pointAsString[2]);
                }
                else {
                    this.x = 0;
                    this.y = 0;
                }

                this.toString = function () {
                    var string = "(";
                    string += this.x;
                    string += ",";
                    string += this.y;
                    string += ")";
                    return string;
                }
            }


            function getMiddlePoint(firstPoint, secondPoint) {
                var middlePoint = new Point();
                if (firstPoint.x == secondPoint.x) {
                    middlePoint.x = firstPoint.x;
                    middlePoint.y = firstPoint.y + 1;
                }
                else if (firstPoint.y == secondPoint.y) {
                    middlePoint.y = firstPoint.y;
                    middlePoint.x = firstPoint.x + 1;
                }
                else {
                    middlePoint.x = firstPoint.x + 1;
                    middlePoint.y = firstPoint.y + 1;
                }
                return middlePoint;
            }

            var points;
            var currentStartPoint;
            var currentlySelecting;
            $("#gameBoard td").click(function () {
                if (currentlySelecting) {
                    for (var i = 0; i < points.length; i++) {
                        var cell = getCellFromPoint(points[i]);
                        cell.removeClass("notReadyCell");
                        cell.fadeTo(0, 1);
                    }
                    cell = getCellFromPoint(currentStartPoint);
                    cell.removeClass("notReadyCell");
                    cell.fadeTo(0, 1);
                    currentlySelecting = false;
                    points = undefined;
                    player.nextTurn();
                }
                else {
                    var cell = $(this);
                    if (isOpponentCell(cell)) {
                        return;
                    }
                    cell.addClass(player.currentUsed);
                    cell.addClass("notReadyCell");
                    cell.fadeTo(0, 0.5);
                    currentlySelecting = true;
                    currentStartPoint = getPointFromCellPosition(cell.position());
                }
            });


            $("#gameBoard td").mouseover(function () {
                if (currentlySelecting) {
                    var cell = $(this);
                    var point = getPointFromCellPosition(cell.position());
                    if (isMoveValid(currentStartPoint, point)) {
                        var middlePoint = getMiddlePoint(currentStartPoint, point);
                        if (points != undefined) {
                            for (var i = 0; i < points.length; i++) {
                                var cell = getCellFromPoint(points[i]);
                                cell.removeClass(player.currentUsed);
                                cell.removeClass("notReadyCell");
                                cell.fadeTo(0, 1);
                            }
                        }
                        points = [middlePoint, point];
                        for (var i = 0; i < points.length; i++) {
                            var cell = getCellFromPoint(points[i]);
                            cell.addClass(player.currentUsed);
                            cell.addClass("notReadyCell");
                            cell.fadeTo(0, 0.1);
                            cell.fadeTo(500, 0.5);
                        }
                    }
                }
            });

            $("#gameBoard td").mouseout(function () {
                var cell = $(this);
                if (!isCellUsed(cell)) {
                    $(this).removeClass("invalidMove");
                }
            });

            update();

            function update() {
                $("#gameBoard td").each(function () {
                    var cell = $(this);
                    if (isCellUsed(cell)) {
                        cell.addClass("invalidMove");
                    }
                });
            }

            var gameBoardPosition = $("#gameBoard").position();
            function getPointFromCellPosition(position) {
                var gameBoardLeft = gameBoardPosition.left;
                var gameBoardTop = gameBoardPosition.top;
                var currentLeft = position.left;
                var currentTop = position.top;
                var calculatedLeft = currentLeft - gameBoardLeft;
                var calculatedTop = currentTop - gameBoardTop;

                var estimatedX = parseInt(calculatedLeft / 40, 10);
                var estimatedY = parseInt(calculatedTop / 41, 10);
                var estimatedPoint = new Point(estimatedX, estimatedY);
                return estimatedPoint;
            }

            $(document).keyup(function (e) {
                if (e.keyCode == 27) {
                    if (points != undefined) {
                        for (var i = 0; i < points.length; i++) {
                            var cell = getCellFromPoint(points[i]);
                            cell.removeClass(player.currentUsed);
                            cell.removeClass("notReadyCell");
                            cell.fadeTo(0, 1);
                        }
                    }

                    cell = getCellFromPoint(currentStartPoint);
                    cell.removeClass(player.currentUsed);
                    cell.removeClass("notReadyCell");
                    cell.fadeTo(0, 1);
                    currentlySelecting = false;
                    points = undefined;
                }
            });

            $("#games").hide(0);
            $("#gameBoardWrapper").hide(0);
            console.log("end");
        });

    </script>
</head>
<body>
    <div id="container">
        <header>

        </header>
        <div id="main" role="main">
            <div id="welcome">
                <fieldset>
                    <legend>Welcome</legend>
                    <label>Your name: </label>
                    <input type="text" />
                    <input type="button" value="OK" />
                </fieldset>
            </div>
            <div id="games">
                <input type="button" value="Create Game" />
                <input type="button" value="Join Game" />
                <ul id="gamesList">
                    <li>Game 1</li>
                    <li>Game 2</li>
                </ul>
            </div>
            <div id="gameBoardWrapper">
            <table id="gameBoard">
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
            </div>
        </div>
        <footer>

        </footer>
    </div>
    <!-- eo #container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    <script>        window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
    <!-- scripts concatenated and minified via ant build script-->
    <script src="js/plugins.js"></script>
    <script src="js/script.js"></script>
    <!-- end scripts-->
    <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg");</script>
  <![endif]-->
    <script>
        var _gaq = [["_setAccount", "UA-XXXXX-X"], ["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID 
        (function (d, t) {
            var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
            g.src = ("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js";
            s.parentNode.insertBefore(g, s)
        } (document, "script"));
  </script>
</body>
</html>
